<template>
  <div class="subjects-container">
    <el-card>
      <!-- 学科名称 -->
      <el-row>
        <el-col :span="18">
          <el-form label-width="80px" :inline="true" class="demo-ruleForm">
            <el-form-item label="学科名称" prop="subject">
              <el-input v-model="searchVal" size="small"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="resetForm" size="small">清除</el-button>
              <el-button type="primary" size="small" @click="searchForm">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" style="text-align:right">
          <el-button type="success" @click="subjectAdd()">
            <i class="el-icon-edit">
              <span>新增学科</span>
            </i>
          </el-button>
        </el-col>
      </el-row>
      <!-- 数据总数 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable="false"
        style="margin-bottom: 20px;"
      ></el-alert>
      <!-- 表格 -->
      <el-table :data="subjectsData" style="width: 100%;">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="subjectName" label="学科名称"></el-table-column>
        <el-table-column prop="username" label="创建者"></el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="160">
          <template slot-scope="scope">{{time(scope.row.addDate)}}</template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示">
          <template slot-scope="scope">
            <div>{{ scope.row.isFrontDisplay === 1? '是' : '否' }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录"></el-table-column>
        <el-table-column prop="tags" label="标签"></el-table-column>
        <el-table-column prop="totals" label="题目数量"></el-table-column>
        <el-table-column fixed="right" label="操作" width="240">
          <template slot-scope="scope">
            <el-button @click="toDirectorys(scope.row)" type="text" size="small">学科分类</el-button>
            <el-button @click="toTags(scope.row)" type="text" size="small">学科标签</el-button>
            <el-button @click="subjectAdd(scope.row)" type="text" size="small">修改</el-button>
            <el-button @click="delSubject(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          background
          :current-page.sync="page"
          :page-size="pagesize"
          :page-sizes="[5,10,20,50]"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          layout=" prev, pager, next, sizes, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
    <!-- 新增学科 -->
    <subjects-add ref="addsubject" :data="subjectProps" @updateList="updateList()" />
  </div>
</template>

<script>
import moment from 'moment'
import { list, remove } from '../../api/hmmm/subjects'
import subjectsAdd from '../components/subjects-add.vue'
export default {
  components: {
    subjectsAdd
  },
  data () {
    return {
      searchVal: '',
      timerId: null,
      subjectsData: [],
      subjectProps: {},
      page: 1,
      pagesize: 10,
      total: 0
    }
  },
  created () {
    this.subjectsList()
  },
  methods: {
    // 获取学科列表
    async subjectsList () {
      const { data } = await list({
        page: this.page,
        pagesize: this.pagesize,
        subjectName: this.searchVal
      })
      console.log(data)
      this.subjectsData = data.items
      this.total = data.counts
    },
    // 清除
    resetForm () {
      this.searchVal = null
    },
    // 搜索
    searchForm () {
      this.page = 1
      this.subjectsList()
    },
    // 新增学科和修改学科
    subjectAdd (val) {
      this.subjectProps = val || {}
      this.$nextTick(() => {
        this.$refs.addsubject.open(val)
      })
    },
    // 格式化创建日期
    time (val) {
      return moment(val).format('YYYY-MM-DD HH:mm:ss')
    },
    // 更新
    updateList () {
      this.subjectsList()
    },
    // 前台是否显示
    // formateIsFrontDisplay (row, column, cellValue, index) {
    //   return cellValue === 1 ? '是' : '否'
    // },
    // 学科分类-目录
    toDirectorys (val) {
      this.$router.push(`directorys?id=${val.id}&name=${val.subjectName}`)
    },
    // 学科标签-标签
    toTags (val) {
      this.$router.push(`tags?id=${val.id}&name=${val.subjectName}`)
    },
    // 删除学科
    async delSubject (val) {
      await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await remove(val)
      this.$message.success('删除成功')
      this.subjectsList()
    },
    // 切换当前页
    handleCurrentChange (val) {
      this.page = val
      this.subjectsList()
    },
    // 切换条数
    handleSizeChange (val) {
      this.page = 1
      this.pagesize = val
      this.subjectsList()
    }
  }
}
</script>

<style scoped lang='less'>
.subjects-container {
  margin: 10px;
}
.pagination {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
}
</style>
